<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新用户注册</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        a{
            color: skyblue;
            text-decoration: none;
        }
        .box{
            width: 500px;
            height: 600px;
            border: 1px solid #ccc;
            margin: auto;
            margin-top: 50px;
        }
        .box h2{
            margin-left: 20px;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .box .wrap{
            position: relative;
            width: 500px;
            height: 400px;
            margin-left: 50px;
        }
        .box .wrap ul{
            position: absolute;
            width: 400px;
            height: 300px;
        }
        .box .wrap ul li{
            left: 0;right: 250px;
            top: 10px;
        }
        .box .wrap ul li:nth-child(1){
            margin-bottom: 10px;
        }
        .box .wrap ul li:nth-child(1) input{
            padding-bottom: 5px;
        }
        .box .wrap ul li:nth-child(2){
            margin-left: 15px;
            margin-bottom: 10px;
        }
        .box .wrap ul li:nth-child(2) input{
            padding-bottom: 5px;
        }
        .box .wrap ul li:nth-child(3){
            margin-left: -2px;
            margin-bottom: 10px;
        }
        .box .wrap ul li:nth-child(3) input{
            padding-bottom: 5px;
        }
        .box .wrap ul li:nth-child(4){
            margin-left: -33px;
            margin-bottom: 20px;
        }
        .box .wrap ul li:nth-child(4) input{
            padding-bottom: 5px;
            width: 50px;
        }
        .box .wrap ul li:nth-child(4) .first{
            padding-bottom: 5px;
            width: 100px;
        }
        .box .wrap ul li:nth-child(5){
            margin-left: 70px;
            margin-bottom: 10px;
        }
        .box .wrap ul li:nth-child(5) input{
            padding-bottom: 5px;
        }
        .box .wrap ul li:nth-child(6){
            margin-left: 70px;
            margin-bottom: 10px;
        }
        .box .wrap ul li:nth-child(6) input{
            padding-bottom: 5px;
            width: 100px;
            height: 40px;
            border-radius: 5px;
            color: white;
            border: none;
            background-color: rgba(255, 128, 0, 0.824);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>新用户注册</h2>
        <div class="wrap">
            <form action="" target="_blank" method="post">
                <ul>
                    <li>
                        <span>用户名：</span>
                        <input type="text" name="nickname" value="" placeholder="请输入用户名">
                    </li>
                    <li>
                        <span class="one">密码：</span>
                        <input type="password" name="pwd" id="" placeholder="请输入6个以上数字的密码">
                    </li>
                    <li>
                        <span class="two">EMAIL：</span>
                        <input type="text" placeholder="可用于登录和找回密码">
                    <li>
                        <span class="three">手机验证码：</span>
                        <input type="text">
                        <input class="first" type="submit" value="获取手机验证码">
                    </li>
                    <li>
                        <input type="checkbox" name="" id="">请阅读<a href="">《服务条款》</a>
                    </li>
                    <li><input type="submit" value="注册"></li>
                </ul>
            </form>
        </div>
    </div>
</body>
</html>